<template>
    <div class="personList" v-loading="loading">
        <tables></tables>
        <!-- 1 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(0,5)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="一字定" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked1.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="one-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="one-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 2 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(5,15)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="二字定" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked2.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="two-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="two-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 3 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(15,25)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="三字定" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked3.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="three-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="three-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 4 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(25,30)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="四字定" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked4.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="four-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="four-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 5 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(30,32)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="二字现" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked5.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="five-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="five-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 6 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(32,35)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="三字现" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked6.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="six-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="six-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 7 -->
        <el-table
            class="tables"
            border
            size="mini"
            :header-cell-style="{background:'#ccc'}"
            :data="listChange.slice(35,39)"
            stripe
            style="width: 100%"
         >
            <el-table-column prop="categoryName" label="四字现" min-width="60"></el-table-column>
            <el-table-column prop="betsMin" label min-width="30"></el-table-column>
            <el-table-column prop="betsMax" label min-width="30"></el-table-column>
            <el-table-column prop="itemMax" label min-width="50"></el-table-column>
            <el-table-column prop="backAmount" label="同步" min-width="70">
                <template slot="header">
                    <el-checkbox v-model="checked7.three">同步</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-select name="seven-three-father" size="mini" v-model="scope.row.back" placeholder="请选择">
                        <el-option name="seven-three" v-for="(v,i) in cut" :key="i" :label="v" :value="v"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="winAmount" label min-width="40">
                <template slot-scope="scope">
                    <span>{{scope.row.odds = scope.row.oddsMax-scope.row.difficulty*scope.row.back}}</span>
                </template>
            </el-table-column>
        </el-table>

        <mt-button size='small' style="margin-top:10px;width:100%" @click="submit" type="primary">确定</mt-button>
    </div>
</template>
<script>
import tables from "./tables";
import { mapState } from "Vuex";
export default {
    name: "personList",
    data() {
        return {
            listOriginal: [],
            listChange: [],
            loading:false,
            checked1: {
                three: true
            },
            checked2: {
                three: true
            },
            checked3: {
                three: true
            },
            checked4: {
                three: true
            },
            checked5: {
                three: true
            },
            checked6: {
                three: true
            },
            checked7: {
                three: true
            }
        };
    },
     watch: {
        listChange() {
            this.$nextTick(function() {
                this.selects(this.checked1.three,"one-three","one-three-father",1);
                this.selects(this.checked2.three,"two-three","two-three-father",2);
                this.selects(this.checked3.three,"three-three","three-three-father",3);
                this.selects(this.checked4.three,"four-three","four-three-father",4);
                this.selects(this.checked5.three,"five-three","five-three-father",5);
                this.selects(this.checked6.three,"six-three","six-three-father",6);
                this.selects(this.checked7.three,"seven-three","seven-three-father",7);
            });
        },
        "checked1.three"() {
            this.selects(this.checked1.three,"one-three","one-three-father",1);
        },
        "checked2.three"() {
            this.selects(this.checked2.three,"two-three","two-three-father",2);
        },
        "checked3.three"() {
            this.selects(this.checked3.three,"three-three","three-three-father",3);
        },
        "checked4.three"() {
            this.selects(this.checked4.three,"four-three","four-three-father",4);
        },
        "checked5.three"() {
            this.selects(this.checked5.three,"five-three","five-three-father",5);
        },
        "checked6.three"() {
            this.selects(this.checked6.three,"six-three","six-three-father",6);
        },
        "checked7.three"() {
            this.selects(this.checked7.three,"seven-three","seven-three-father",7);
        }
    },
    computed: {
        ...mapState(["saveType", "user", "cut"])
    },
    components: {
        tables
    },
    saveType(){
        this.getList(this.saveType);
    },
    created() {
        this.getList(this.saveType);
    },
    methods: {
        // 提交修改
        submit(){
            console.log(this.listOriginal,11)
            console.log(this.listChange,22)
            var params = []
            var changeDate = {}
            this.listOriginal.forEach((v,i) => {
                changeDate = {}
                if(v.back != this.listChange[i].back){
                    this.$set(changeDate,'back',this.listChange[i].back)
                    this.$set(changeDate,'id',this.listChange[i].id)
                }
                if(changeDate.id != undefined){
                    params.push(changeDate)
                }            
            })
            console.log(params)
            var subData = {
                isUpdateSelf :0,
                categoryInfo :JSON.stringify(params)
            }
            this.$api.post(this.$url.categoryUpdate,subData,res=>{
                console.log(res.data)
                if(res.data.code == 200){
                    this.$message({
                        message: "修改成功！",
                        type: "success"
                    });
                    this.getList(this.saveType)
                }
            })
        },
        // 获取规则
        getList(type) {
            this.loading = true
            this.$api.post(
                this.$url.categoryList,
                {
                    module: type,
                    userId: this.user.id
                },
                res => {
                    if (res.data.code == 200) {
                        this.listOriginal = res.data.data.yiziding;
                        this.listChange = JSON.parse(
                            JSON.stringify(this.listOriginal)
                        );
                    }
                    this.loading = false
                }
            );
        },
        selects(num1,num2,num3,type) {
            var that = this
            if (num1) {
                var strFather = document.getElementsByName(num3)
                var str = document.getElementsByName(num2);
                for (var i = 0; i < str.length; i++) {
                    str.item(i).onclick = function(e) {
                        var s = e.path[0].innerText
                        if(type==1){
                            if(num2 == "one-three"){
                                for (var i = 0; i < 5; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        }else if(type==2){
                            if(num2 == "two-three"){
                                for (var i = 5; i < 15; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        }else if(type==3){
                            if(num2 == "three-three"){
                                for (var i = 15; i < 25; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        } else if(type==4){
                            if(num2 == "four-three"){
                                for (var i = 25; i < 30; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        }else if(type==5){
                            if(num2 == "five-three"){
                                for (var i = 30; i < 32; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        }else if(type==6){
                            if(num2 == "six-three"){
                                for (var i = 32; i < 35; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        } else if(type==7){
                            if(num2 == "seven-three"){
                                for (var i = 35; i < 39; i++) {
                                    that.listChange[i].back = s
                                }
                            }
                        }       
                    };
                }
            } else {
                var strFather = document.getElementsByName(num3)
                var str = document.getElementsByName(num2);
                for (var i = 0; i < str.length; i++) {
                    str.item(i).onclick = function(e) {
                        var s = e.path[0].innerText
                        for (var i = 0; i < strFather.length; i++) {
                            strFather.item(i).value = strFather.item(i).value;
                        }
                    };
                }
            }
        },
    }
};
</script>
<style lang='less' scoped>
/deep/.el-input__inner{
    padding: 0 0 0 2px;
}
</style>